<template>
  <div>
    <div class="mlt">
      <h2>盘点单号：{{ pdata.ordersn }} 日期：{{ pdata.orderdate }}</h2>
    </div>
    <div class="mlt">
      <el-button type="primary" @click="addgoods">添加</el-button>
      <el-button type="primary" @click="addgoodsSbu">保存</el-button>
      <el-button @click="goBack">返回</el-button>
    </div>
    <div>
      <table class="tftable">
        <thead>
          <tr>
            <td>商品名称</td>
            <td>规格名称</td>
            <td>商品进货价</td>
            <td>原库存合计</td>
            <td>盘点库存</td>
            <td>原金额合计</td>
            <td>盘点金额合计</td>
            <td>库存盈亏</td>
            <!-- <td>金额盈亏</td> -->
            <td>备注</td>
            <td>操作</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in tableData" :key="index">
            <td style="200px">
              <el-tooltip :content="item.goods_name" placement="top">
                <div
                  style="
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  "
                >
                  {{ item.goods_name }}
                </div>
              </el-tooltip>
            </td>
            <td>{{ item.goods_attr_name }}</td>
            <td>{{ item.supply_price }}</td>
            <td>{{ item.goods_attr_stock }}</td>
            <td style="width: 100px">
              <el-input
                v-model="item.inventory_qty"
                oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
                style="width: 100px"
                @blur="onBlur(item)"
              />
            </td>
            <td>{{ item.tatal_supply_price }}</td>
            <td style="width: 100px">
              {{
                item.inventory_qty - item.goods_attr_stock > 0
                  ? item.tatal_supply_price -
                    (item.inventory_qty - item.goods_attr_stock) *
                      item.supply_price
                  : item.tatal_supply_price +
                    (item.inventory_qty - item.goods_attr_stock) *
                      item.supply_price
              }}
            </td>
            <td style="width: 100px">
              <div
                style="
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                "
              >
                {{ item.inventory_qty - item.goods_attr_stock }}
              </div>
            </td>
            <td style="width: 100px">
              <el-input v-model="item.remark" style="width: 100px" />
            </td>
            <td>
              <el-button type="text" @click="delGoods(index)">删除</el-button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <el-dialog
      :before-close="handleClose"
      title="商品"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <div>
        <div style="margin-bottom: 15px">
          <el-input
            v-model="input"
            placeholder="请输入内容"
            style="width: 50%; margin-right: 10px"
          />
          <el-button @click="search">搜索</el-button>
        </div>
        <el-table
          ref="multipleTable"
          :data="tableData1"
          style="width: 100%"
          tooltip-effect="dark"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            :selectable="selectEnable"
            type="selection"
            width="55"
          />

          <el-table-column
            label="商品名称"
            prop="goods_name"
            show-overflow-tooltip
          />
          <el-table-column
            label="商品条码"
            prop="goods_code"
            show-overflow-tooltip
          />
          <el-table-column
            label="商品价格"
            prop="goods_price"
            show-overflow-tooltip
          />
          <el-table-column label="供货价格" prop="supply_price" />
          <el-table-column label="	单位" prop="unit" />
          <el-table-column label="总库存" prop="stock" show-overflow-tooltip />
          <el-table-column
            label="规格编码"
            prop="goods_attr_code"
            show-overflow-tooltip
          />
          <el-table-column
            label="规格名称"
            prop="goods_attr_name"
            show-overflow-tooltip
          />
          <el-table-column label="规格价格" prop="goods_attr_price" />
          <el-table-column label="规格库存" prop="goods_attr_stock" />
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="Submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { getGoodsList } from '@/api/public'
  import { invItemAdd } from '@/api/commodity'

  export default {
    props: {
      pdata: {
        type: Object,
        required: true,
      },
    },
    data() {
      return {
        dialogVisible: false,
        tableData1: [],
        tableData: [],
        input: '',
        pagesize: 10,
        page: 1,
        multipleSelection: [],
      }
    },
    watch: {},
    mounted() {
      this.init()
    },
    methods: {
      init() {
        this.goodsLists()
      },
      goodsLists() {
        const parmas = {
          goods_name: this.input,
          pagesize: this.pagesize,
          page: this.page,
        }
        getGoodsList(parmas).then((res) => {
          this.tableData1 = res.data
        })
      },
      search() {
        this.goodsLists()
      },
      goBack() {
        this.$emit('showMain', 0)
      },
      addgoodsSbu() {
        const data = []
        this.tableData.forEach((e) => {
          data.push({
            goods_id: e.goods_id,
            item_code: e.goods_attr_code,
            inventory_cost: e.inventory_cost,
            original_cost: e.tatal_supply_price,
            inventory_qty: e.inventory_qty,
            original_qty: e.goods_attr_stock,
            goods_name: e.goods_name,
            attr_name: e.goods_attr_name,
            attr_id: e.goods_attr_id,
            remark: e.remark,
          })
        })
        const datap = {
          item_data: JSON.stringify(data),
          id: this.pdata.id,
        }
        invItemAdd(datap).then(() => {
          this.goBack()
        })
      },
      delGoods(index) {
        this.tableData.splice(index, 1)
      },
      onBlur(e) {
        // e.inventory_cost
        if (e.inventory_qty - e.goods_attr_stock > 0) {
          e.inventory_cost =
            e.tatal_supply_price +
            (e.inventory_qty - e.goods_attr_stock) * e.supply_price
        } else {
          e.inventory_cost =
            e.tatal_supply_price -
            (e.inventory_qty - e.goods_attr_stock) * e.supply_price
        }
      },
      // 弹框的回调
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(() => {
            done()
          })
          .catch(() => {})
      },
      addgoods() {
        this.input = ''
        this.goodsLists()
        this.dialogVisible = true
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      // 提交
      Submit() {
        this.dialogVisible = false
        this.tableData = this.multipleSelection
      },
      handleSelectionChanges() {},
      // 多选禁用
      selectEnable(row) {
        if (
          this.tableData.some(
            (item) =>
              item.goods_id === row.goods_id &&
              item.goods_attr_id === row.goods_attr_id
          )
        ) {
          return false
        } else {
          return true // 不禁用
        }
      },
    },
  }
</script>
<style scoped>
  table.tftable,
  table.table-count {
    font-size: 12px;
    color: #333333;
    width: 100%;
    border-width: 1px;
    /* border-collapse: unset; */
    border-spacing: 0;
    border-collapse: unset (collapse/separate);
  }

  table.table-count th,
  table.table-count td {
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    border-width: 1px;
    border-style: solid;
    border-color: #e4e4e4;
    text-align: center;
  }

  table.tftable th,
  table.tftable td {
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #e4e4e4;
    text-align: left;
    text-align: center;
  }

  .tftable {
    margin-left: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
  }
  table.tftable tr:hover {
    background: #c3ecff;
  }
  .tftable > thead > tr:hover {
    background: white;
  }
</style>
